<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米社区</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 500px;
            background-color: #F3F4F7;
            min-width: 1000px;
        }
        .nav{
            width: 100%;
            height: 70px;
            background-color: #ffff;
            padding:  20px;
            box-sizing: border-box;
        }
        .nav>img{
            width: 40px;
            
        }
        .nav>div{
            display: inline-block;
        }
        .nav>.nav_content{
            vertical-align: top;
            margin: 5px 0 0 10px;
            border: 1px solid red;
        }
        .nav>.nav_content>span{
            margin: 0 20px;
            font-size: 20px;
        }
        .nav>.nav_content>span:nth-of-type(1){
            font-weight: bolder;
        }
        .nav_right{
            float: right;
            line-height: 30px;
            text-align: center;
            width: 80px;
            border-radius: 21px;
            background-color: #000;
            color: #ffff; 
        }
        @media (min-width: 300px) and (max-width: 800px) {
           .nav_content{
            display: none !important;
           }
          
        }
        .mask{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(100, 100, 100, 0.5);
            display: none;
        }
        .mask>.mask_content{
            width: 80%;
            background-color: red;
            height: 80%;
            position: absolute;
            top: 0;               
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .content {
            width: 100%;
            height: 350px;
            border: 1px solid red;
            background-color: rgb(243,244,247);
        }
        .content_middle {
            width: 70%;
            min-width: 1100px;
            height: 350px;
            margin: 0 auto;
            background-color: rgb(243,244,247);
            
        }
        .content_img {
            float: left;
            width: 60%;
            height: 350px;
            border-radius: 10px;
            min-width: 710px;
            overflow: hidden;
        }
        .content_img img {
            width: 100%;
            height: 100%;
            
            overflow: hidden;
        }

        .content_zi {
            float: right;
            width: 30%;
            height: 350px;
            /* background-color: blue; */
            padding: 0 20px 0 20px;
            background-color: rgb(255,255,255);
        }
        .content_tit {
            
            height: 70px;
        }
        .content_tit >p:nth-of-type(1) {
            font-size: 16px;
            font-weight: 600;
            float: left;
            line-height: 70px;

        }
        .content_tit >p:nth-of-type(2) {
            font-size: 12px;
            font-weight: 400;
            float: right;
            line-height: 70px;
        }
        .content_tit2 li {
            height: 40px;
        }
        .content_tit2 li span {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="nav">
            <img src="./img/index.png" alt="">
            <div class="nav_content">
                <span>首页</span>
                <span>圆子</span>
                <span>MIUI官网</span>
                <span>小米商城</span>   
            </div>
            <div class="nav_right">
                登录 
                <div class="mask">
                    <div class="mask_content"></div>
                </div> 
            </div>   
        </div>

        <div class="content">
            <div class="content_middle">
                <div class="content_img">
                    <img  src="https://ts.market.mi-img.com/download/MiVip/004857c04f6bc479ea64296390e75a4ce485a40bc" alt="">
                </div>
                <div class="content_zi">
                    <div class="content_tit">
                        <p>小米咨询</p>
                        <p>换一批</p>
                    </div>
                    <ul class="content_tit2">
                        <li><span style="color: #fe3e29;">1</span>小米手机2022年度盘点，你最爱哪个？</li>
                        <li><span style="color: #fe3e29;">2</span>小米手机2022年度盘点，你最爱哪个？</li>
                        <li><span style="color: #fe3e29;">3</span>小米手机2022年度盘点，你最爱哪个？</li>
                        <li><span style="color: rgba(14,21,28,0.4);">4</span>小米手机2022年度盘点，你最爱哪个？</li>
                        <li><span style="color: rgba(14,21,28,0.4);">5</span>小米手机2022年度盘点，你最爱哪个？</li>
                        <li><span style="color: rgba(14,21,28,0.4);">6</span>小米手机2022年度盘点，你最爱哪个？</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var but = document.querySelector(".nav_right");
    var mask = document.querySelector(".mask");
    var mask_content = document.querySelector(".mask_content");
    but.onclick = function () {
        mask.style.display = "block";
    }
    mask_content.onclick = function () {
        console.log(1111);
        mask.style.display = "none";
    }
</script>
</html>